<template>
  <div class="page-container" v-global-loading="loading">
    <div class="page-card-container">
      <a-form :model="pageSet" layout="inline">
        <a-form-item label="商品名称">
          <a-input
            v-model:value="pageSet.productName"
            style="width: 170px"
            :allowClear="true"
          ></a-input>
        </a-form-item>
        <a-form-item label="会员名称">
          <a-input
            v-model:value="pageSet.memberName"
            style="width: 170px"
            :allowClear="true"
          ></a-input>
        </a-form-item>
        <a-form-item label="订单编号">
          <a-input
            v-model:value="pageSet.orderCode"
            style="width: 170px"
            :allowClear="true"
          ></a-input>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-warning" @click="loadPagination(true)">
            查询
          </div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="reset">重置</div>
        </a-form-item>
      </a-form>
      <a-table
        size="small"
        :loading="tableLoading"
        :dataSource="tableData"
        :columns="columns"
        bordered
        :pagination="false"
        :scroll="{
          x: 1200,
          y: useAppStore.pageCommonInfo.canUseHeight - 36 + 'px'
        }"
      >
        <template #bodyCell="{text, record, index, column}">
          <template v-if="column.title == '商品图片'">
            <div
              class="pointer"
              v-if="text"
              @click="
                () => {
                  setVisible(true, index);
                }
              "
            >
              <img :src="text" alt="" style="height: 30px" />
              <a-image
                :width="0"
                :style="{display: 'none'}"
                :preview="{
                  visible: visibleImg[index],
                  onVisibleChange: (e) => {
                    setVisible(e, index);
                  }
                }"
                :src="text"
              />
            </div>
          </template>
          <template v-if="column.title == '操作'">
            <span
              class="pointer c-primaryColor"
              @click="operation(1, record)"
              >{{ record.isShow ? "隐藏" : "显示" }}</span
            >
            <span class="pointer c-primaryColor" @click="operation(2, record)"
              >&nbsp;&nbsp;删除</span
            >
          </template>
          <template v-if="column.title == '评价星级'">
            <a-rate :value="text" disabled />
          </template>
        </template>
      </a-table>
      <Pagination
        :pageSet="pageSet"
        style="margin-top: 10px"
        :loadPagination="loadPagination"
      ></Pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, inject, onActivated, onMounted} from "vue";
import Pagination from "@/components/pagination/Pagination.vue";
import useAppStore from "@/store/app";
import {
  appraiseManagePage,
  appraiseManageList,
  appraiseManageDetail,
  appraiseManageDelete,
  appraiseManageChangeStatus
} from "@/api/orderManagement/evaluationManagement";
import {message, Modal} from "ant-design-vue";
const calcCanUseHeight: any = inject("calcCanUseHeight");
onActivated(() => {
  calcCanUseHeight();
});
onMounted(() => {
  calcCanUseHeight();
});
const tableLoading = ref<boolean>(false);
const loading = ref<boolean>(false);
const visibleImg = ref<any>([]);
const setVisible = (flag, index) => {
  visibleImg.value[index] = flag;
};
const tableData = ref<Array<any>>([]);
const pageSet = ref<any>({
  pageNo: 1,
  pageSize: 20,
  total: 0
});
const reset = (): void => {
  pageSet.value = {
    pageNo: 1,
    pageSize: 20,
    total: 0
  };
  loadPagination(true);
};
//获取数据
const loadPagination = (flag: boolean = false): void => {
  if (flag) {
    pageSet.value.pageNo = 1;
  }
  tableLoading.value = true;
  appraiseManagePage(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      tableData.value.forEach((item) => {
        item.productImg = JSON.parse(item.productImg) || [];
        if (item.productImg.length) {
          item.img = item.productImg[0].ImgUrl;
        } else {
          item.img = "";
        }
      });
      pageSet.value.total = res.data.totalRows;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
loadPagination();
//操作
const operation = (type: number, data: any) => {
  if (type == 1) {
    //显示
    let title = data.isShow ? "隐藏" : "显示";
    Modal.confirm({
      title: `确定要${title}此条数据吗?`,
      onOk() {
        loading.value = true;
        appraiseManageChangeStatus({id: data.id, isShow: !data.isShow})
          .then((res) => {
            message.success("设置成功!");
            loadPagination(true);
          })
          .finally(() => {
            loading.value = false;
          });
      }
    });
  } else if (type == 2) {
    //删除
    Modal.confirm({
      title: `确定要删除此条数据吗?`,
      onOk() {
        loading.value = true;
        appraiseManageDelete({id: data.id})
          .then((res) => {
            message.success("删除成功!");
            loadPagination(true);
          })
          .finally(() => {
            loading.value = false;
          });
      }
    });
  }
};
const columns = ref<Array<object>>([
  {
    title: "序号",
    dataIndex: "name",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    },
    fixed: "left"
  },
  {
    title: "商品名称",
    dataIndex: "productName",
    align: "center",
    width: 200
  },
  {
    title: "商品图片",
    dataIndex: "img",
    align: "center",
    width: 120
  },
  {
    title: "会员名称",
    dataIndex: "memberName",
    align: "center",
    width: 120
  },
  {
    title: "评价星级",
    dataIndex: "starLv",
    align: "center",
    width: 180
  },
  {
    title: "评价内容",
    dataIndex: "content",
    align: "center",
    width: 200
  },
  {
    title: "订单编号",
    dataIndex: "orderCode",
    align: "center",
    width: 180
  },
  {
    title: "是否显示",
    dataIndex: "isShow",
    align: "center",
    width: 120,
    customRender: ({text}) => {
      return text ? "是" : "否";
    }
  },
  {
    title: "操作",
    dataIndex: "l",
    align: "center",
    width: 220,
    fixed: "right"
  }
]);
</script>

<style lang="less" scoped></style>
